﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../UiThemes/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
    <link href="../UiThemes/themes/cupertino/theme.css" rel="stylesheet" />
    <script src="../UiThemes/jquery-1.10.2.js"></script>
    <script src="../UiThemes/jquery-ui-1.10.4.custom.js"></script>
    <script src="../UiThemes/jquery.ui.datepicker-zh-CN.js"></script>
    <script src="js/esl.js"></script>
</head>
<body>

    <input type="button" id="btn1" value="按部门" />
    <input type="button" id="btn2" value="按业务分类" />
    <div id="div_dep" style="display: none">
        <div id="mainPie1" style="height:300px; border: 1px solid #ccc; padding: 5px;"></div>
    </div>

    <div id="div_cate" style="display: none; ">
        <div id="mainPie2" style="height: 700px; border: 1px solid #ccc; padding: 5px;"></div>
    </div>
</body>
</html>
<script>
    function initDialog(title,id, height, width, fun) {
        $("#" + id + "").dialog({
            title:title,
            autoOpen: false,
            resizable: true,
            height: height,
            width: width,
            resizable: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            buttons: {
                "OK": function () {
                    if (fun != undefined) {
                        fun();
                    }
                    $(this).dialog('close');
                },
                "Close": function () {
                    $(this).dialog('close');
                }
            }
        })
    }

    $("#btn1").click(function () {
        initDialog("部门收入分析","div_dep", 460, 1000, null);
        $("#div_dep").dialog("open");

        setTimeout(function () { render_dep(); }, 1000);
    });
    $("#btn2").click(function () {
        initDialog("部门业务收入分析", "div_cate", 500, 1000, null);
        $("#div_cate").dialog("open");

        setTimeout(function () { render_cate(); }, 1000);
    });
    

    function render_dep() {
        var myChart2 = echart.init(document.getElementById('mainPie1'));
        var data = { dep: ["固收", "股销", "资管", "投行"], year: ["2011", "2012", "2013", "2014"], data: [[100, 200, 300, 400], [120, 24, 310, 450], [110, 240, 34, 400], [300, 650, 890, 409]] };
        var c = new configBar({
            data: data,
            firstFiled: "year",
            secondFiled: "dep",
            dataFiled: "data"
        });
        c.extend();
        myChart2.setOption(c.getOptions());
    }

    function render_cate()
    {
        var myChart2 = echart.init(document.getElementById('mainPie2'));

        var data1 = {
            dep: ["投行----业务部门1", "业务部门2", "业务部门3", "业务部门4", "业务部门5", "业务部门6", "业务部门7", "业务部门8", "业务部门9", "业务部门10", "业务部门11", "业务部门12",
        	"业务部门13", "业务部门14", "业务部门15", "业务部门16", "业务部门17", "业务部门18", "业务部门19", "业务部门20", "业务部门21", "业务部门22", "业务部门23", "业务部门24"],
            year: ["2011      ", "2012      ", "2013      ", "2014      "],
            data: [
        	[100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 100, 200, 100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 100, 200],
        	[120, 240, 310, 450, 120, 240, 310, 450, 120, 240, 310, 450, 120, 240, 310, 450, 120, 240, 310, 450, 120, 240, 310, 450],
        	[110, 240, 348, 400, 110, 240, 348, 400, 110, 240, 348, 400, 110, 240, 348, 400, 110, 240, 348, 400, 110, 240, 348, 400],
        	[300, 650, 890, 409, 300, 650, 890, 409, 300, 650, 890, 409, 300, 650, 890, 409, 300, 650, 890, 409, 300, 650, 890, 409]]
        };
        var c1 = new configBar({
            data: data1,
            firstFiled: "year",
            secondFiled: "dep",
            dataFiled: "data"
        });
        c1.extend();
        myChart2.setOption(c1.getOptions());
    }


    var echart = null;

    require.config({
        paths: {
            echarts: './js/echarts',
            'echarts/chart/bar': './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
            'echarts/chart/map': './js/echarts-map'
        }
    });

    require(
    [
        'echarts',
        'echarts/chart/bar',
        'echarts/chart/line',
        'echarts/chart/map'
    ],
    function (ec) {
        echart = ec;
    }
    );

    

    var configBar = function (option) {
        this.property = {
            data: null,
            firstFiled: "",
            secondFiled: "",
            dataFiled: ""
        };

        this.extend = function () {
            for (var i in option) {
                if (option.hasOwnProperty(i)) {
                    this.property[i] = option[i];
                }
            }
        }

        this.getCellData = function (filed) {
            return this.property.data[filed];
        }

        this.toolTip = function () {
            return {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            }
        }
        this.legend = function () {
            return {
                data: this.getCellData(this.property.firstFiled)
            }
        }
        this.xAxis = function () {
            return [
                    {
                        type: 'value'
                    }
            ]
        }
        this.yAxis = function () {
            return [
                {
                    type: 'category',
                    data: this.getCellData(this.property.secondFiled)
                }
            ]
        }
        this.series = function () {
            var info = [];
            for (var i = 0; i < this.property.data.data.length; i++) {
                var temp = {
                    name: this.getCellData(this.property.firstFiled)[i],
                    type: 'bar',
                    stack: '总量',
                    itemStyle: { normal: { label: { show: false, position: 'insideLeft' } } },
                    data: this.property.data.data[i]
                };
                info.push(temp);
            }
            return info;
        }

        this.getOptions = function () {
            return {
                tooltip: this.toolTip(),
                legend: this.legend(),
                calculable: true,
                xAxis: this.xAxis(),
                yAxis: this.yAxis(),
                series: this.series()
            }
        }
    }
</script>
